<template>
  <div class="pubu">
    <van-list @load="onLoad" offset="200">
      <div v-masonry transition-duration="0" class="d1" v-if="bottomList.length">
        <div v-masonry-tile class="d11" v-for="(item, index) in bottomList" :key="index">
          <a :href="'https://m.you.163.com' + item.schemeUrl">
            <div class="done">
              <img class="img1" :src="item.picUrl" alt="" />
              <div>{{ item.title }}</div>
              <img class="img11" :src="item.avatar" alt="" />
              <span>{{ item.nickname }}</span>
            </div>
          </a>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script lang="ts" setup>
import { bottomApi } from '@/api/zhideBottom'
import { ref } from 'vue'
import { throttle } from 'lodash'

const bottomList: any = ref([])

const page = ref(0)
// const resData = ref<any>([])
const getbottomApi = async () => {
  const res: any = await bottomApi(page.value)
  if (res.code == 200) {
    bottomList.value = [...bottomList.value, ...res.data.result[0].topics]
  }
}

const onLoad = throttle(() => {
  // 页码 + 1
  page.value += 1

  getbottomApi()
}, 500)
</script>

<script lang="ts">
export default {
  name: 'buyBottom'
}
</script>

<style lang="less" scoped>
a {
  color: inherit !important;
  text-decoration: none !important;
}

.pubu {
  margin-top: 18px;
  background: #eee;

  .d11 {
    .done {
      border-radius: 15px;
      width: 169px;
      margin-right: 8.5px;
      margin-left: 6.5px;
      margin-bottom: 8px;
      border: 2px rgb(213, 206, 208) solid;

      .img1 {
        // margin: px;
        width: 170px;
        border-radius: 10px;
      }

      div {
        white-space: pre-wrap;
        font-size: 16px;
        margin-left: 10px;
      }

      .img11 {
        margin-left: 10px;
        width: 24px;
        width: 0.48rem;
        height: 0.48rem;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-radius: 0.24rem;
        border: 1px solid #d9d9d9;
      }

      span {
        display: inline-block;
        font-size: 0.26667rem;
        margin-left: 0.08rem;
        vertical-align: baseline;
      }
    }
  }

  .d22 {
    div {
      border-radius: 20px;

      img {
        width: 160px;
        border-radius: 20px;
      }
    }
  }
}
</style>
